<template lang="pug">
div.home
  div.top
    el-row(
      :gutter="15"
    )
      el-col(
        :span="8"
      )
        mt-card.card
          div.card-title PACS<br/>医学影像系统
          div.btn 查看详情
      el-col(
        :span="16"
        style="border-radius: 10px;height: 100%;"
      )
        div.title-padding
          div.title 数字概览
        el-row(
          style="background-color: #fff;padding: 20px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;"
        )
          el-col(
            :span="6"
          )
            div.item.bg
              div.left
                div.num {{ inspect }}人
                div.txt 今日预约人数
              img(
                :src="yyrsImg"
                height="50px"
              )
          el-col(
            :span="6"
          )
            div.item.bg1
              div.left
                div.num {{ order }}人
                div.txt 今日待检查人数
              img(
                :src="djcrsImg"
                height="50px"
              )
          el-col(
            :span="6"
          )
            div.item.bg2
              div.left
                div.num {{ toBeDiagnosed }}人
                div.txt 今日待诊断人数
              img(
                :src="dzdrsImg"
                height="50px"
              )
          el-col(
            :span="6"
          )
            div.item.bg3
              div.left
                div.num {{ diagnosed }}人
                div.txt 今日待审核人数
              img(
                :src="dshrsImg"
                height="50px"
              )

  div.middle
    el-row(
      :gutter="15"
    )
      el-col.left(
        :span="16"
      )
        el-row(
          :gutter="15"
        )
          el-col(
            :span="6"
          )
            div.left-item
              img(
                :src="jcdjImg"
                height="60px"
              )
              div.title 检查登记
              div.txt 医学影像管理中的关键步骤
              div.btn(@click="goto(1)") 进入
          el-col(
            :span="6"
          )
            div.left-item
              img(
                :src="gzlbImg"
                height="60px"
              )
              div.title 工作列表
              div.txt 即将进行检查的详细列表
              div.btn(@click="goto(2)") 进入
          el-col(
            :span="6"
          )
            div.left-item
              img(
                :src="jcjgImg"
                height="60px"
              )
              div.title 检查结果
              div.txt 影像处理、诊断和报告的生成
              div.btn(@click="goto(3)") 进入
          el-col(
            :span="6"
          )
            div.left-item
              img(
                :src="jcsjImg"
                height="60px"
              )
              div.title 基础数据
              div.txt 影像数据的存储、管理和检索
              div.btn(@click="goto(4)") 进入
      el-col.right(
        :span="8"
      )
        div.calendar
          div.title-padding
            div.title 科室工作列表
            div.more 更多
          div.schedule-calendar
            div.calendar-box
              div.calendar-top
                div.yearMonth 2024年12月
                div(style="display: flex;align-items: center;")
                  div(class="today-btn" @click="toToday()") 今日
                  mt-select(
                    style="width: 100px;padding: 10px 15px;"
                    placeholder="周"
                    :filterable="true"
                    :clearable="true")
              div(class="weekdays")
                <div>一</div>
                <div>二</div>
                <div>三</div>
                <div>四</div>
                <div>五</div>
                <div>六</div>
                <div>日</div>
              div( class="days-item")
                div(@click="pick(day, index)" v-for="(day, index) in days" :key="index" class="time-normal")
                  <!--今天--> 
                  span( v-if="day == '13'" class="time-active") {{ day }}
                  span( v-else :class="[selectedCur == index ? 'time-active' : '']") {{ day }}
              div( class="operate-arrow")
                i(class="el-icon-arrow-left ope-left" @click="weekPre")
                i(class="el-icon-arrow-right ope-right" @click="weekNext")
  div.bottom
    el-row(
      :gutter="15"
    )
      el-col(
        :span="6"
      )
        div.left
          div.title-padding
            div.title 分类统计
          div.echartsData(
            ref="echartsData"
          )
      el-col(
        :span="9"
      )
        div.right
          div.table
            div.title-padding
              div.title 危急值记录
            div.content-padding
              mt-table(
                style="height: 95%"
                v-bind="tableProps"
              )
      el-col(
        :span="9"
      )
        div.right
          div.table
            div.title-padding
              div.title 检查记录
            div.content-padding
              mt-table(
                style="height: 95%"
                v-bind="overdueTableProps"
              )
</template>

<script setup lang="ts">
import jcdjImg from "./assets/jcdj.png";
import gzlbImg from "./assets/gzlb.png";
import jcjgImg from "./assets/jcjg.png";
import jcsjImg from "./assets/jcsj.png";
import yyrsImg from "./assets/yyrs.png";
import djcrsImg from "./assets/djcrs.png";
import dzdrsImg from "./assets/dzdrs.png";
import dshrsImg from "./assets/dshrs.png";

import { onMounted, ref } from "vue";
import * as echarts from "echarts";

import {
  type TableProps,
  type TableColumnProps,
} from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { type QueryPagination, useApi } from "@scmt/core-api";
import { useUser } from "@scmt/common-store";

import {
  type RegistrationQueryParams,
  adviceColumns,
  ERegistrationColumnKey,
  registrationStateColorMap,
  RegistrationStateEnum
} from "@scmt/api-pacs-registration";
import { ESourceStatus } from "@scmt/api-common";
import { useRouter } from "vue-router";

const $router = useRouter();
const queryPramas = reactive<RegistrationQueryParams>({
  name: "",
  pageNum: 1,
  pageSize: 20,
  registrationState: "2,3,4,5,6",
});
const user = useUser();
const $api = useApi();
const { data, request, loadingMap } = useRequest({
  //上传危急值记录
  tableData: (q: any) => {
    const params = Object.assign({ source: ESourceStatus.PACS }, queryPramas, q);
    return $api.lis.criticalValue.query(params);
  },
  //检查记录
  overdueTableData: (q: any) => {
    const params = Object.assign({}, queryPramas, q);
    return $api.pacs.registration.query(params);
  },
  listDoctorAsOptions: (val: string) => {
    return $api.user.listDoctorAsOptions({ officeId: val });
  },

  total: () => {
    return $api.pacs.registration.homeStatistic().then((res) => {
      getLeftEchartData(res);
    });;
  }
});

const days = ref(["09", "10", "11", "12", "13", "14", "15"]);
//我的日程数据
const getScheduleData = () => { };
// 我的日程-按周 开始
const toToday = () => { };
// 日期相关
const getDate = () => { };
const pick = (day: any, index: any) => { };
const weekPre = () => { };
const weekNext = () => { };
const getCurrentDate = () => { };
const formatDate = (year: any, month: any, day: any) => {
  const y = year;
  let m = month;
  if (m < 10) m = `0${m}`;
  let d = day;
  if (d < 10) d = `0${d}`;
  return `${y}-${m}-${d}`;
};
//页面初始化加载后执行
onMounted(() => {
  request(["tableData", "overdueTableData", "listDoctorAsOptions", "total"])
});
//跳转路由
const goto = (index: number) => {
  let url = "";
  switch (index) {
    case 1: {
      url = "/pacs/checkRegistration/registration/registration"
      break;
    }
    case 2: {
      url = "/pacs/workList/work/list"
      break;
    }
    case 3: {
      url = "/pacs/registrationList/registration"
      break;
    }
    case 4: {
      url = "/pacs/basic/EncodingRules/EncodingRules"
      break;
    }
    case 5: {
      url = "/pacs/home"
      break;
    }

  }
  if (url.length > 0) {
    $router.push(url);

  }
}
//已预约
const inspect = ref("0");
//待检查
const order = ref("0");
//待诊断
const toBeDiagnosed = ref("0");
//已诊断待审核
const diagnosed = ref("0");

const echartsData = ref(null);
//获取统计数据并形成统计图
const getLeftEchartData = (itemData: any) => {
  const chartInstance = echarts.init(echartsData.value);
  //let color = ["#0E7CE2", "#FF8352", "#E271DE"];
  var xData = ["放射科", "超声科", "病理科"];
  var echartData = ["56", "45", "36"];
  inspect.value = "0";
  order.value = "0";
  toBeDiagnosed.value = "0";
  diagnosed.value = "0";
  if (itemData && itemData.data) {
    if (itemData.data.officeTotal && itemData.data.officeTotal.length > 0) {
      xData = itemData.data.officeTotal.map((i: any) => i.executionOfficeName);
      echartData = itemData.data.officeTotal.map((i: any) => i.count);
    }
    if (itemData.data.stateTotal && itemData.data.stateTotal.length > 0) {
      let stateTotal = itemData.data.stateTotal;
      let filter = stateTotal.filter((i: any) => i.state == RegistrationStateEnum.Inspect);
      if (filter && filter.length > 0) {
        inspect.value = filter[0].count;
      }
      filter = stateTotal.filter((i: any) => i.state == RegistrationStateEnum.Order);
      if (filter && filter.length > 0) {
        order.value = filter[0].count;
      }
      filter = stateTotal.filter((i: any) => i.state == RegistrationStateEnum.ToBeDiagnosed);
      if (filter && filter.length > 0) {
        toBeDiagnosed.value = filter[0].count;
      }
      filter = stateTotal.filter((i: any) => i.state == RegistrationStateEnum.Diagnosed);
      if (filter && filter.length > 0) {
        diagnosed.value = filter[0].count;
      }

    }
  }
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      borderWidth: 0,
      top: 35,
      bottom: "15%",
      textStyle: {
        color: "#fff",
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "rgba(193, 207, 220, 1)",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "rgba(0, 0, 0, 0.72)",
            fontSize: 14,
          },
        },
        splitLine: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(0, 0, 0, 0.72)",
            fontSize: 15,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(193, 207, 220, 1)",
          },
        },
      },
    ],
    series: [
      {
        name: "分布情况",
        type: "bar",
        barMaxWidth: 26,
        barGap: "10%",
        itemStyle: {
          normal: {
            color: (params: any) => {
              let colors = [
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(254, 174, 162, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(253, 114, 112, 1)",
                  },
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(123, 200, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(53, 157, 245, 1)",
                  },
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(251, 169, 128, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(247, 203, 107, 1)",
                  },
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(254, 174, 162, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(253, 114, 112, 1)",
                  },
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(123, 200, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(53, 157, 245, 1)",
                  },
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(251, 169, 128, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(247, 203, 107, 1)",
                  },
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(254, 174, 162, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(253, 114, 112, 1)",
                  },
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(123, 200, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(53, 157, 245, 1)",
                  },
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(251, 169, 128, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(247, 203, 107, 1)",
                  },
                ]),
              ];
              return colors[params.dataIndex];
            },
            barBorderRadius: [30, 30, 0, 0], //圆角大小
          },
        },
        label: {
          normal: {
            show: true,
            position: "top",
            formatter: function (data: any) {
              return "{a" + data.dataIndex + "|" + data.data + "}";
            },
            rich: {
              a0: {
                color: "rgba(220, 85, 69, 1)",
                fontSize: 16,
                fontFamily: "DIN",
                fontWeight: "bold",
              },
              a1: {
                color: "rgba(73, 112, 200, 1)",
                fontSize: 16,
                fontFamily: "DIN",
                fontWeight: "bold",
              },
              a2: {
                color: "rgba(250, 157, 0, 1)",
                fontSize: 16,
                fontFamily: "DIN",
                fontWeight: "bold",
              },
            },
          },
        },
        data: echartData,
      },
    ],
  };
  chartInstance.setOption(option);
  window.addEventListener("resize", function () {
    chartInstance.resize(); // 当屏幕尺寸变化时，重置图表的大小
  });
};
const tableProps = computed(() => {
  const { tableData } = toRefs(data);
  const columns: TableColumnProps[] = [
    {
      prop: "outpatientNumber",
      label: "来源编号",
      tooltip: true,
    },
    {
      prop: "patientName",
      label: "患者姓名",
      width: 100,
    },

    {
      prop: "reportId",
      label: "上报人员",
      tooltip: true,
      minWidth: 180,
      render: ({ row }) => {
        const patientType = data.listDoctorAsOptions ?? [];
        let resText = row.reportId + "";
        if (patientType && patientType.length > 0) {
          let filter = patientType.filter(
            (item) => item.value == row.reportId
          );
          if (filter && filter.length > 0) {
            resText = filter[0].label;
          }
        }
        return h("div", resText);
      },
    },
    {
      prop: "createTime",
      label: "上报时间",
      format: "datetime"
    },

  ];

  const props: TableProps = {
    loading: loadingMap["tableData"],
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    pagerCount: 5,
    columns,
    onPaginate: (pagination: QueryPagination) =>
      request("tableData", pagination),
  };
  return props;
});
const overdueTableProps = computed(() => {
  const { overdueTableData } = toRefs(data);
  const columns: TableColumnProps[] = [
    adviceColumns[ERegistrationColumnKey.PatientType],
    adviceColumns[ERegistrationColumnKey.RegistrationStateLable],
    adviceColumns[ERegistrationColumnKey.Name],
    adviceColumns[ERegistrationColumnKey.ProjectName],
    adviceColumns[ERegistrationColumnKey.RegistrationTime],
  ];

  const props: TableProps = {
    loading: loadingMap.overdueTableData,
    data: overdueTableData.value?.items,
    pagination: overdueTableData.value?.pagination,
    pagerCount: 5,
    columns,
    onPaginate: (pagination: QueryPagination) =>
      request("overdueTableData", pagination),
    //@ts-ignore
    cellStyle: ({ row, column }) => {
      if (column.property === adviceColumns[ERegistrationColumnKey.RegistrationStateLable].prop) {
        return {
          //@ts-ignore
          backgroundColor: registrationStateColorMap[row[column.property]] || "",
        }
      }
    },
  };
  return props;
});

</script>

<style lang="less" scoped>
.home {
  height: 100%;

  .top {
    .card {
      background-color: #6f42c1;
      border-radius: 10px;
      padding: 26px 30px;
      background-size: 35% auto;
      background-position: 95% 50%;
      background-repeat: no-repeat;
      background-image: url(./assets/people.png);

      .card-title {
        font-size: 25px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 20px;
      }

      .btn {
        width: 130px;
        text-align: center;
        line-height: 38px;
        border-radius: 5px;
        color: #fff;
        background-color: #19be6b;
      }
    }

    .title-padding {
      padding-top: 15px;
      background-color: #fff;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    .title {
      font-size: 17px;
      font-weight: bold;
      padding-left: var(--mt-padding);
      border-left: 3px solid var(--el-color-primary);
      height: 16px;
      line-height: 16px;
    }

    .item {
      margin-left: 20px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      padding: 20px;
      border-radius: 5px;

      .txt {
        font-size: 15px;
        color: #808080;
      }

      .num {
        color: #000000;
        font-size: 30px;
        font-weight: bold;
        padding: 15px 0;
      }
    }

    .bg {
      background-color: #e5f3fd;
      margin-left: 0;
    }

    .bg1 {
      background-color: #fff9e5;
    }

    .bg2 {
      background-color: #ebf8e7;
    }

    .bg3 {
      background-color: #f2edfb;
    }
  }

  .middle {
    margin: 15px 0;

    .left {
      .left-item {
        border-radius: 10px;
        background-color: #fff;
        text-align: center;
        padding: 30px 15px;
        cursor: pointer;

        .title {
          color: #000000;
          font-size: 18px;
          font-weight: bold;
          padding: 10px 0 10px;
        }

        .txt {
          color: #808080;
          font-size: 16px;
          padding: 15px 0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .btn {
          background-color: #7244c5;
          color: #fff;
          width: 100px;
          border-radius: 10px;
          padding: 5px 0;
          border-radius: 20px;
          padding: 3px 0;
          margin: auto;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }

    .right {
      height: 100%;

      .card {
        background-color: #6f42c1;
        border-radius: 10px;
        padding: 26px 30px;
        background-size: cover;
        background-image: url(./assets/earth.jpg);

        .title {
          font-size: 20px;
          font-weight: 600;
          color: #fff;
          margin-bottom: 20px;
        }

        .btn {
          width: 130px;
          text-align: center;
          line-height: 38px;
          border-radius: 5px;
          color: #fff;
          background-color: #19be6b;
        }
      }
    }
  }

  .bottom {
    height: calc(100% - 477px);

    .el-row {
      height: 100%;

      .el-col {
        height: 100%;
      }
    }

    .left {
      height: 100%;
      background-color: #fff;
      border-radius: 10px;

      .title-padding {
        padding-top: 15px;
        background-color: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }

      .title {
        font-size: 17px;
        font-weight: bold;
        padding-left: var(--mt-padding);
        border-left: 3px solid var(--el-color-primary);
        height: 16px;
        line-height: 16px;
      }

      .echartsData {
        height: calc(100vh - 550px);
      }
    }



    .right {
      height: 100%;
      background-color: #fff;
      border-radius: 10px;
      display: flex;
      flex-direction: column;

      .el-row {
        height: 100%;

        .el-col {
          height: 100%;
        }
      }

      .table {
        background-color: #fff;
        border-radius: 10px;
        height: 100%;
        overflow: hidden;

        .content-padding {
          padding: 20px 30px;
          padding-bottom: 0px;
          height: calc(100% - 31px);
        }

        .title-padding {
          padding-top: 15px;
        }

        .title {
          font-size: 17px;
          font-weight: bold;
          padding-left: var(--mt-padding);
          border-left: 3px solid var(--el-color-primary);
          height: 16px;
          line-height: 16px;
        }
      }
    }
  }

  .calendar {
    background-color: #fff;
    height: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;

    .title-padding {
      flex-shrink: 0;
      padding-top: 15px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }

    .title {
      flex: 1;
      font-size: 17px;
      font-weight: bold;
      padding-left: var(--mt-padding);
      border-left: 3px solid var(--el-color-primary);
      height: 16px;
      line-height: 16px;
    }

    .more {
      padding-right: 15px;
      color: #1c7bef;
      font-size: 13px;
      cursor: pointer;
    }

    /* 日程 */
    .schedule-calendar {
      background: #fafbff;
      border-radius: 8px;
      margin: 10px;
    }

    .calendar-box {
      position: relative;
      margin-top: 20px;
    }

    .schedule-list {
      overflow: hidden;
      overflow-y: auto;
    }

    .schedule-list::-webkit-scrollbar {
      width: 5px;
    }

    .schedule-list::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background-color: #ccc;
    }

    .schedule-list::-webkit-scrollbar-track {
      border-radius: 8px;
      background-color: #e7e7e7;
      border: 1px solid #cacaca;
    }

    .calendar-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .yearMonth {
      font-size: 14px;
      color: #666666;
      text-align: left;
      padding-top: 20px;
      padding-left: 15px;
      margin-bottom: 10px;
    }

    .today-btn {
      width: 39px;
      height: 20px;
      line-height: 20px;
      background: #ffffff;
      box-sizing: border-box;
      border: 1px solid #eeeeee;
      font-size: 10px;
      color: #666666;
      cursor: pointer;
      margin-right: 5px;
      text-align: center;
    }

    .weekdays {
      padding-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 10px;
      font-size: 14px;
      color: #666666;
      font-weight: bold;
    }

    .days-item {
      height: 46px;
      line-height: 46px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 16px;
      font-weight: bold;
      color: #3d3d3d;
      padding-bottom: 20px;
    }

    .time-normal {
      cursor: pointer;
      width: 37px;
      height: 46px;
    }

    .time-active {
      width: 37px;
      height: 46px;
      border-radius: 4px;
      color: #fff;
      background: linear-gradient(332deg,
          #2ca7ff -8%,
          #69bbff 58%,
          #90d5ff 112%);
      cursor: pointer;
      display: block;
    }

    i.dots {
      width: 6px;
      height: 6px;
      border-radius: 6px;
      background: linear-gradient(180deg, #ffb00e 0%, #ff683f 100%);
      display: block;
      margin: 0 auto;
      margin-top: -13px;
    }

    .operate-arrow {}

    .operate-arrow i {
      color: #90a7ff;
      font-weight: bold;
      cursor: pointer;
      position: absolute;
      top: 79px;
    }

    i.ope-left {
      left: 5px;
    }

    i.ope-right {
      right: 5px;
    }
  }
}
</style>
